<template>
    <div class="contain-edit">
        <div class="header">
           <p>使用帮助>>{{id?'编辑':'新增'}}</p>
       </div>
       <div class="main">
           <el-form :model="info" :rules="rules" ref="info" label-width="120px" class="">
                <el-form-item label="标题" prop="question" >
                    <el-input v-model="info.question"  placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="answer">
                    <el-input
                        type="textarea"
                        style="width:400px"
                        :autosize="{ minRows: 5, maxRows: 10}"
                        placeholder="内容"
                        v-model="info.answer">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"  @click="handleSave('info')">保存</el-button>
                    <el-button @click="back()">返回</el-button>
                </el-form-item>
            </el-form>
        </div>


    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
export default {
    data() {
        return {
            id:'',
            info: {
                answer:'',
                question:''
            },
            rules: {
                answer: [
                    { required: true, message: '请输入内容', trigger: 'blur' }
                ],
                question: [
                    { required: true, message: '请输入标题', trigger: 'blur' }
                ]
            },
        }
    },
    mounted() {
        this.id  = this.$router.currentRoute.query.id;
        if(this.id){
            this.getDetail(this.id);
        }
    },
    methods: {
        back(){this.$router.push('/help');},
        handleSave:function(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let url = this.id? CONSTANT.URL.HELP.UPDATE: CONSTANT.URL.HELP.ADD;
                    common.requestAjax(url,JSON.stringify(this.info),null,(res)=>{
                        if(res.status == 200) {
                            this.$message({
                                    type: 'success',
                                    message: '保存成功！'
                                });
                        this.$router.push("/help");
                        }
                        else{
                            this.$message({
                                type: 'warning',
                                message: res.msg
                            });
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });



        },
        getDetail(id){
            let url = CONSTANT.URL.HELP.FINDDETAIL;
            let param = {
                id:id
            };
            common.requestAjax(url,{},param,(res)=>{
                let info = res.data.bussData;
                this.info ={
                    id:info.id,
                    answer:info.answer,
                    question:info.question
                }
            })
        },
    },

}
</script>

<style lang="scss" scoped >

    .el-form-item__content{
        margin-left: 0;
    }
    .avatar-uploader {
        border-radius: 6px;
        box-sizing: border-box;
        vertical-align: top;
        .el-upload {
            cursor: pointer;
            position: relative;
            overflow: hidden;
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
                border: 1px dashed #d9d9d9 !important;
                border-radius: 6px;
                margin-left: 6px;
            }
            .avatar {
                width: 178px;
                height: 178px;
                display: block;
            }
        }
        .el-upload:hover {
            border-color: #20a0ff;
        }
    }
</style>
